<template>
  <div>
    <Editor
      v-model="content"
      ref="editorRef"
      :tinymceScriptSrc="tinymceScriptSrc"
      :init="TinyMCEInitConfig"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import Editor from '@tinymce/tinymce-vue';

const tinymceScriptSrc = '/public/Tinymce/tinymce.min.js';
const content = ref('');
const TinyMCEInitConfig = ref({
  // 去除tinyMCE的logo
  branding: false,
  // 去除右上角的按钮
  promotion: false,
  toolbar_mode: 'wrap',
  license_key: 'gpl',
  height: 500,
  language_url: '/public/Tinymce/langs/zh_CN.js',
  language: 'zh_CN',
  // 一些插件
  plugins:
    'advlist anchor autolink charmap code codesample directionality emoticons fullscreen help image insertdatetime link lists media nonbreaking pagebreak preview print save searchreplace table template textpattern visualblocks visualchars wordcount quickbars',
  // 工具栏配置
  toolbar: [
    'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
    'anchor | codesample | searchreplace | visualblocks | wordcount'
  ],
  // 菜单栏配置
  menubar: 'file edit view insert format tools table help',
  // 自定义菜单项
  menu: {
    file: { title: '文件', items: 'newdocument restoredraft | preview | print | deleteallconversations' },
    edit: { title: '编辑', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
    view: { title: '查看', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
    insert: { title: '插入', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor | insertdatetime' },
    format: { title: '格式', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat' },
    tools: { title: '工具', items: 'spellchecker spellcheckerlanguage | code wordcount' },
    table: { title: '表格', items: 'inserttable | cell row column | tableprops deletetable' },
    help: { title: '帮助', items: 'help' }
  },
  // 内容样式
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
  // 弹窗中使用时的z-index配置
  popup_css_add: '.tox-pop { z-index: 99999 !important; } .tox-menu { z-index: 99999 !important; } .tox-collection { z-index: 99999 !important; } .tox-dialog-wrap { z-index: 100000 !important; } .tox-dialog { z-index: 100000 !important; }',
  // 设置编辑器的基础z-index
  base_url: '/public/Tinymce/',
  // 确保在弹窗中正常工作
  fixed_toolbar_container: null,
  // 自动调整z-index
  auto_focus: false
});
</script>

<script lang="ts">
export default {
  name: 'TinyMce'
};
</script>

<style scoped>
/* TinyMCE 编辑器 z-index 设置 - 适配弹窗环境 */
:deep(.tox) {
  z-index: 99999 !important;
}

:deep(.tox-tinymce) {
  z-index: 99999 !important;
}

:deep(.tox-editor-container) {
  z-index: 99999 !important;
}

:deep(.tox-menubar) {
  z-index: 99999 !important;
}

:deep(.tox-toolbar-overlord) {
  z-index: 99999 !important;
}

:deep(.tox-toolbar) {
  z-index: 99999 !important;
}

:deep(.tox-edit-area) {
  z-index: 99999 !important;
}

:deep(.tox-statusbar) {
  z-index: 99999 !important;
}

/* 弹出层和下拉菜单 - 更高的z-index以适应弹窗环境 */
:deep(.tox-menu) {
  z-index: 100000 !important;
}

:deep(.tox-collection) {
  z-index: 100000 !important;
}

:deep(.tox-pop) {
  z-index: 100000 !important;
}

:deep(.tox-dialog-wrap) {
  z-index: 100001 !important;
}

:deep(.tox-dialog) {
  z-index: 100001 !important;
}

:deep(.tox-dialog__backdrop) {
  z-index: 100000 !important;
}

/* 工具提示 */
:deep(.tox-tooltip) {
  z-index: 100002 !important;
}

/* 全屏模式 */
:deep(.tox-fullscreen) {
  z-index: 100003 !important;
}

/* 特殊处理：确保在Modal/Dialog中正常显示 */
:deep(.ant-modal .tox),
:deep(.el-dialog .tox),
:deep(.a-modal .tox) {
  position: relative !important;
}

/* 颜色选择器和其他浮动面板 */
:deep(.tox-swatches),
:deep(.tox-color-picker),
:deep(.tox-textfield),
:deep(.tox-listbox) {
  z-index: 100005 !important;
}

/* 确保编辑器内容区域不被遮挡 */
:deep(.tox-edit-area__iframe) {
  z-index: inherit !important;
}
</style>
